<template>
  <div class="history">
    <!-- 疫情历史数据 -->
    <div
      class="parent"
      v-loading="oneloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 1)"
    >
      <div class="item" id="one"></div>
    </div>
    <div
      class="parent"
      v-loading="twoloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 1)"
    >
      <div class="item" id="two"></div>
    </div>
    <div
      class="parent"
      v-loading="threeloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 1)"
    >
      <div class="item" id="three"></div>
    </div>
    <div
      class="parent"
      v-loading="fourloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(44, 52, 60, 1)"
    >
      <div class="item" id="four"></div>
    </div>
  </div>
</template>
<script type="text/javascript">
import echarts from "echarts";
import axios from "@/utils/axios";
export default {
  data() {
    return {
      onechart: null,
      twochart: null,
      threechart: null,
      fourchart: null,
      oneloading: true,
      twoloading: true,
      threeloading: true,
      fourloading: true,
      dataone: [],

      datatwo: {},
      datathree: [],
      datafour: {}
    };
  },
  created() {},
  mounted() {
    axios
      .get("/history/one")
      .then(res => {
        this.dataone = JSON.parse(res.data.data);
        this.one(this.dataone);
        this.oneloading = false;
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("/history/two")
      .then(res => {
        this.datatwo = JSON.parse(res.data.data);
        this.two(this.datatwo);
        this.twoloading = false;
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("/history/three")
      .then(res => {
        this.datathree = JSON.parse(res.data.data);
        this.three(this.datathree);
        this.threeloading = false;
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("/history/four")
      .then(res => {
        this.datafour = JSON.parse(res.data.data);
        this.four(this.datafour);
        this.fourloading = false;
      })
      .catch(err => {
        console.log(err);
      });

    window.onresize = this.resize;
  },
  methods: {
    resize() {
      if (this.onechart) {
        this.onechart.resize();
      }
      if (this.twochart) {
        this.twochart.resize();
      }

      if (this.threechart) {
        this.threechart.resize();
      }
      if (this.fourchart) {
        this.fourchart.resize();
      }
    },
    one(data) {
      var myChart = echarts.init(document.getElementById("one"));
      this.onechart = myChart;
      var option = {
        backgroundColor: "#2c343c",

        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc"
          }
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: data.sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    two(data) {
      var myChart = echarts.init(document.getElementById("two"));
      this.twochart = myChart;
      var dataBJ = data.dataBJ;
      var dataGZ = data.dataGZ;
      var dataSH = data.dataSH;

      var schema = [
        { name: "date", index: 0, text: "日" },
        { name: "AQIindex", index: 1, text: "AQI指数" },
        { name: "PM25", index: 2, text: "PM2.5" },
        { name: "PM10", index: 3, text: "PM10" },
        { name: "CO", index: 4, text: "一氧化碳（CO）" },
        { name: "NO2", index: 5, text: "二氧化氮（NO2）" },
        { name: "SO2", index: 6, text: "二氧化硫（SO2）" }
      ];

      var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)"
      };

      var option = {
        backgroundColor: "#2c343c",
        color: ["#dd4444", "#fec42c", "#80F1BE"],
        legend: {
          top: 10,
          data: ["北京", "上海", "广州"],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        grid: {
          left: "10%",
          right: 150,
          top: "18%",
          bottom: "10%"
        },
        tooltip: {
          padding: 10,
          backgroundColor: "#222",
          borderColor: "#777",
          borderWidth: 1,
          formatter: function(obj) {
            var value = obj.value;
            return (
              '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
              obj.seriesName +
              " " +
              value[0] +
              "日：" +
              value[7] +
              "</div>" +
              schema[1].text +
              "：" +
              value[1] +
              "<br>" +
              schema[2].text +
              "：" +
              value[2] +
              "<br>" +
              schema[3].text +
              "：" +
              value[3] +
              "<br>" +
              schema[4].text +
              "：" +
              value[4] +
              "<br>" +
              schema[5].text +
              "：" +
              value[5] +
              "<br>" +
              schema[6].text +
              "：" +
              value[6] +
              "<br>"
            );
          }
        },
        xAxis: {
          type: "value",
          name: "日期",
          nameGap: 16,
          nameTextStyle: {
            color: "#fff",
            fontSize: 14
          },
          max: 31,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "AQI指数",
          nameLocation: "end",
          nameGap: 20,
          nameTextStyle: {
            color: "#fff",
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          splitLine: {
            show: false
          }
        },
        visualMap: [
          {
            left: "right",
            top: "10%",
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ["圆形大小：PM2.5"],
            textGap: 30,
            textStyle: {
              color: "#fff"
            },
            inRange: {
              symbolSize: [10, 70]
            },
            outOfRange: {
              symbolSize: [10, 70],
              color: ["rgba(255,255,255,.2)"]
            },
            controller: {
              inRange: {
                color: ["#c23531"]
              },
              outOfRange: {
                color: ["#444"]
              }
            }
          },
          {
            left: "right",
            bottom: "5%",
            dimension: 6,
            min: 0,
            max: 50,
            itemHeight: 120,

            precision: 0.1,
            text: ["明暗：二氧化硫"],
            textGap: 30,
            textStyle: {
              color: "#fff"
            },
            inRange: {
              colorLightness: [1, 0.5]
            },
            outOfRange: {
              color: ["rgba(255,255,255,.2)"]
            },
            controller: {
              inRange: {
                color: ["#c23531"]
              },
              outOfRange: {
                color: ["#444"]
              }
            }
          }
        ],
        series: [
          {
            name: "北京",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataBJ
          },
          {
            name: "上海",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataSH
          },
          {
            name: "广州",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataGZ
          }
        ]
      };
      myChart.setOption(option);
    },
    three(data) {
      var myChart = echarts.init(document.getElementById("three"));
      this.threechart = myChart;

      var option = {
        backgroundColor: "#2c343c",
        title: {
          text: "1990 与 2015 年各国家人均寿命与 GDP",
          textStyle: {
            color: "#ccc"
          }
        },
        legend: {
          right: 10,
          data: ["1990", "2015"],
          textStyle: {
            color: "#ccc",
            fontSize: 16
          }
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          scale: true,
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        series: [
          {
            name: "1990",
            data: data[0],
            type: "scatter",
            symbolSize: function(data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              label: {
                show: true,
                formatter: function(param) {
                  return param.data[3];
                },
                position: "top"
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(120, 36, 50, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(251, 118, 123)"
                },
                {
                  offset: 1,
                  color: "rgb(204, 46, 72)"
                }
              ])
            }
          },
          {
            name: "2015",
            data: data[1],
            type: "scatter",
            symbolSize: function(data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            emphasis: {
              label: {
                show: true,
                formatter: function(param) {
                  return param.data[3];
                },
                position: "top"
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(25, 100, 150, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(129, 227, 238)"
                },
                {
                  offset: 1,
                  color: "rgb(25, 183, 207)"
                }
              ])
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    four(data) {
      var myChart = echarts.init(document.getElementById("four"));
      this.fourchart = myChart;
      var option = {
        backgroundColor: "#2c343c",
        title: {
          text: "某地区蒸发量和降水量",
          subtext: "纯属虚构"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["蒸发量", "降水量"],
          textStyle: {
            color: "#fbf9f9"
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: data.month
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "蒸发量",
            type: "bar",
            data: data.one,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            },
            itemStyle: {
              color: "#00ffd3"
            }
          },
          {
            name: "降水量",
            type: "bar",
            data: data.two,
            markPoint: {
              data: [
                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.history {
  height: calc(100vh - 50px);
}
.parent {
  width: 50%;
  height: 50%;
  float: left;
}
.item {
  width: 100%;
  height: 100%;
}
</style>